<template>
  <a-card>
    <a-form id="components-form-demo-validate-other"  :form="form" v-bind="formItemLayout" @submit="handleSubmit">
      <a-form-item label="分类" has-feedback>
        <a-select
          v-decorator="['goodsType', { rules: [{ required: true, message: '请选择一个分类!' }] }]"
          placeholder="请选择一个分类"
        >
        <a-select-option v-for="(item,index) in goodsType" :key="index" :value="item.typeId">{{item.typeName}}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="品牌" has-feedback>
        <a-select
          v-decorator="['goodsBrand', { rules: [{ required: true, message: '请选择一个品牌!' }] }]"
          placeholder="请选择一个品牌"
        >
        <a-select-option v-for="(item,index) in brand" :key="index" :value="item.orginId">{{item.orginName}}</a-select-option>
        </a-select>
      </a-form-item>

       <a-form-item label="商品名称">
        <a-input v-decorator="['goodsName', { initialValue: '' }]"  />
      </a-form-item>

      <a-form-item label="进价">
        <a-input-number v-decorator="['goodsPrice', { initialValue: 1000 }]" :min="1" />
        <span class="ant-form-text"> ￥ </span>
      </a-form-item>

      <a-form-item label="售价">
        <a-input-number v-decorator="['goodsSellingPrice', { initialValue: 1000 }]" :min="1" />
        <span class="ant-form-text"> ￥ </span>
      </a-form-item>

      <a-form-item label="库存">
        <a-input-number v-decorator="['goodsCount', { initialValue: 1000 }]" :min="1" />
        <span class="ant-form-text"> 件 </span>
      </a-form-item>

      <a-form-item label="来源地">
        <a-input v-decorator="['goodsOrgin', { initialValue: 1000 }]" />
      </a-form-item>

      <a-form-item label="商品描述">
        <a-textarea placeholder="商品描述" v-decorator="['goodsDescribed', { initialValue: '' }]" />
      </a-form-item>

      <a-form-item label="上下架">
      <a-switch checked-children="上架" un-checked-children="下架" v-decorator="['goodsStatus',{ initialValue: false }, { valuePropName: 'checked' }]" />
    </a-form-item>
      <a-form-item label="图片" extra="">
        <a-upload
          v-decorator="[
            'goodsImg',
          ]"
          action="/api/adminGoodsOperation/upFile"
          :default-file-list="defaultFileList"
          @change="handleChange"
        >
          <a-button v-if="defaultFileList.length<1"> <a-icon type="upload" /> Upload </a-button>
        </a-upload>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
        <a-button type="primary" html-type="submit"> Submit </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import Vue from 'vue'
import { Slider, } from 'ant-design-vue'
import { queryParentGoods, addGoods, queryOrgin } from '@/api/goods'
import imgupload from '../../components/upload/index.vue'
Vue.use(Slider,)
export default {
  components:{
    imgupload
  },
  data: () => ({
    formItemLayout: {
      labelCol: { span: 7 },
      wrapperCol: { span: 8 },
    },
    goodsType: [],
    brand:[],
    defaultFileList:[]
  }),
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'validate_other' })
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          
          if(values.goodsStatus === true){
            values.goodsStatus = 1
          }else{
            values.goodsStatus = 0
          }
          values.goodsImg = values.goodsImg.file.name
          console.log(values)
          addGoods({
            ...values
          }).then((res) =>{
            this.$notification.success({
              message: res.message,
            });
          }).catch((err) =>{
            console.log(err)
          })
        }
      })
    },
    normFile(e) {
      console.log('Upload event:', e)
      if (Array.isArray(e)) {
        return e
      }
      return e && e.fileList
    },
    // 初始化 
    init() {
      // 获取所有父级分类
      queryParentGoods()
        .then((res) => {
          this.goodsType = res.data
        })
        .catch((err) => {
          console.log(err)
        })
      
      // 获取所有品牌列表
      queryOrgin().then((res) =>{
        this.brand = res.data
      }).catch((err) =>{
        console.log(err)
      })
    },
    handleChange({ file, fileList }) {
      // console.log(file, fileList,this.defaultFileList);
      if (file.status !== 'uploading') {
        this.defaultFileList = fileList
      }
    },
  },
  created() {
    this.init()
  },
}
</script>
<style>
#components-form-demo-validate-other .dropbox {
  height: 180px;
  line-height: 1.5;
}
</style>